<template>
	<view class="center">
		<view class="logo" @click="goLogin" :hover-class="!login ? 'logo-hover' : ''">
			<image class="logo-img" :src="login ? avatarUrl :avatarUrl"></image>
			<view class="logo-title">
				<text class="uer-name">Hi，{{login ? uerInfo.name+'('+uerInfo.mobile+')' : '您未登录'}}</text>
				<text class="go-login navigat-arrow" v-if="!login">&#xe65e;</text>
			</view>
		</view>
		<view class="center-list">
			<view class="center-list-item" @click="logout">
				<text class="list-icon">&#xe60f;</text>
				<text class="list-text">切换账号</text>
				<text class="navigat-arrow">&#xe65e;</text>
			</view>
			<navigator :url="'identity/identity?isAuth='+identify.isAuth" hover-class="navigator-hover">
				<view class="center-list-item">
					<text class="list-icon">&#xe60f;</text>
					<text class="list-text">实名认证({{identify.isAuth==="1"?"已认证":"待认证"}})</text>
					<text class="navigat-arrow">&#xe65e;</text>
				</view>
			</navigator>
			<navigator url="changePwd/changePwd" hover-class="navigator-hover">
				<view class="center-list-item">
					<text class="list-icon">&#xe639;</text>
					<text class="list-text">修改密码</text>
					<text class="navigat-arrow">&#xe65e;</text>
				</view>
			</navigator>

		</view>
		<view class="center-list">
			<view class="center-list-item">
				<text class="list-icon">&#xe614;</text>
				<text class="list-text">关于应用</text>
				<text class="navigat-arrow">&#xe65e;</text>
			</view>
			<view class="center-list-item">
				<text class="list-icon">&#xe614;</text>
				<text class="list-text">版本号：1.0.0</text>
				<text class="navigat-arrow">&#xe65e;</text>
			</view>
		</view>
	</view>
</template>

<script>
	import userService from '@/api/user.js'
	export default {
		data() {
			return {
				login: false,
				avatarUrl: '/static/logo.png',
				uerInfo: {},
				identify: {},
			}
		},
		methods: {
			goLogin() {
				if (!this.login) {
					uni.navigateTo({
						url: "/pages/ucenter/login"
					})
				}
			},
			logout() {
				uni.showModal({
					title: "确定切换账号？",
					content: "切换后需重新登录？",
					showCancel: true,
					success: function(res) {
						if (res.confirm) {
							if (this.login) {
								userService.logout().then((res) => {
									console.log(JSON.stringify(res.data));
									uni.showToast({
										icon: "none",
										title: res.data.msg,
										duration: 2000
									});
									uni.removeStorage({
										key: "token",
										success() {
											console.log("清除token成功");
										}
									});
									uni.removeStorage({
										key: "userinfo",
										success() {
											console.log("清除userinfo成功");
										}
									});
								});
							}

							uni.navigateTo({
								url: "/pages/ucenter/login"
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});

			}
		},
		onShow() {
			uni.getStorage({
				key: "token",
				success: (res) => {
					this.login = true;

					uni.getStorage({
						key: "userinfo",
						success: (res) => {
							console.log(JSON.stringify(res));
							this.uerInfo = res.data;
							console.log(JSON.stringify(this.uerInfo));
						}
					});
					userService.getIdentity().then((res) => {

						console.log(JSON.stringify(res.data));
						uni.showToast({
							icon: "none",
							title: res.data.msg,
							duration: 2000
						});

						if (res.data.success) {
							this.identify = res.data.data;
						}
					});
				}
			});
		}
	}
</script>

<style>
	@font-face {
		font-family: texticons;
		font-weight: normal;
		font-style: normal;
		src: url('https://at.alicdn.com/t/font_984210_5cs13ndgqsn.ttf') format('truetype');
	}

	page,
	view {
		display: flex;
	}

	page {
		background-color: #f8f8f8;
	}

	.center {
		flex-direction: column;
	}

	.logo {
		width: 750upx;
		height: 240upx;
		padding: 20upx;
		box-sizing: border-box;
		background-color: #2F85FC;
		flex-direction: row;
		align-items: center;
	}

	.logo-hover {
		opacity: 0.8;
	}

	.logo-img {
		width: 150upx;
		height: 150upx;
		border-radius: 150upx;
	}

	.logo-title {
		height: 150upx;
		flex: 1;
		align-items: center;
		justify-content: space-between;
		flex-direction: row;
		margin-left: 20upx;
	}

	.uer-name {
		height: 60upx;
		line-height: 60upx;
		font-size: 38upx;
		color: #FFFFFF;
	}

	.go-login.navigat-arrow {
		font-size: 38upx;
		color: #FFFFFF;
	}

	.login-title {
		height: 150upx;
		align-items: self-start;
		justify-content: center;
		flex-direction: column;
		margin-left: 20upx;
	}

	.center-list {
		background-color: #FFFFFF;
		margin-top: 20upx;
		width: 750upx;
		flex-direction: column;
	}

	.center-list-item {
		height: 90upx;
		width: 750upx;
		box-sizing: border-box;
		flex-direction: row;
		padding: 0upx 20upx;
	}

	.border-bottom {
		border-bottom-width: 1upx;
		border-color: #c8c7cc;
		border-bottom-style: solid;
	}

	.list-icon {
		width: 40upx;
		height: 90upx;
		line-height: 90upx;
		font-size: 34upx;
		color: #2F85FC;
		text-align: center;
		font-family: texticons;
		margin-right: 20upx;
	}

	.list-text {
		height: 90upx;
		line-height: 90upx;
		font-size: 34upx;
		color: #555;
		flex: 1;
		text-align: left;
	}

	.navigat-arrow {
		height: 90upx;
		width: 40upx;
		line-height: 90upx;
		font-size: 34upx;
		color: #555;
		text-align: right;
		font-family: texticons;
	}
</style>
